var data = {
    bigImgs: [
        "./images/small_1.jpg",
        "./images/small_2.jpg",
        "./images/small_3.jpg",
        "./images/small_4.jpg",
        "./images/small_5.jpg",
        "./images/small_6.jpg",
        "./images/small_7.jpg",
    ],
    middleImgs: [
        "./images/small_1.jpg",
        "./images/small_2.jpg",
        "./images/small_3.jpg",
        "./images/small_4.jpg",
        "./images/small_5.jpg",
        "./images/small_6.jpg",
        "./images/small_7.jpg",
    ],
    smallImgs: [
        "./images/small_1.jpg",
        "./images/small_2.jpg",
        "./images/small_3.jpg",
        "./images/small_4.jpg",
        "./images/small_5.jpg",
        "./images/small_6.jpg",
        "./images/small_7.jpg",
    ]
}
class MagnifyingGlass {
    constructor({ el, data }) {
        this.el = document.querySelector(".section-left"); // section-left
        this.oSmallImg = this.el.children[0].children[0]; // 小图、
        this.oMiddleImg = this.el.children[1].children[0]; // 中图
        this.oMiddleArea = this.oMiddleImg.children[1]; // 中区域
        this.oBigArea = this.el.children[2]; // 大区域
        this.oBigImg = this.oBigArea.children[0]; // 大图

        this.data = data;
        this.render();
        this.mouseHander();
        this.clickHander();

        // 重新设置中区域 this.oMiddleArea 的大小
        // 中区域 (蒙版) 的大小
        // 中区域 (oMiddleArea) / 大区域 = 中图 / 大图片 ==> 蒙版的宽高 --(中区域)
        // 中区域 = (中图 / 大图) * 大区域
        this.oMiddleArea.style.width = (parseInt(Utils.getStyle(this.oMiddleImg, "width")) / parseInt(Utils.getStyle(this.oBigImg, "width"))) * parseInt(Utils.getStyle(this.oBigArea, "width")) + "px";
        this.oMiddleArea.style.height = (parseInt(Utils.getStyle(this.oMiddleImg, "height")) / parseInt(Utils.getStyle(this.oBigImg, "height"))) * parseInt(Utils.getStyle(this.oBigArea, "height")) + "px";
        // console.log(this.oMiddleArea.style.width + "宽"); // 249px
        // console.log(this.oMiddleArea.style.height + "高"); // 249px

        // 比例: 大图 / 中图 = 大区域 / 中区域 ==> 蒙版放大时, 大图区域所放大的比例
        document.addEventListener("load", () => {

        }); // 无影响 ==> 页面全部加载完成后, 才执行里边的内容
        this.ratio = parseInt(Utils.getStyle(this.oBigImg, "width")) / parseInt(this.oMiddleImg.offsetWidth);
    }

    // 渲染鼠标图片显示
    render() {
        let { bigImgs, middleImgs, smallImgs } = this.data;
        // 小图的拼接
        let strHtml = ``;
        smallImgs.forEach((item, index) => {
            strHtml += `<li><img data-index=${index} src=${item}></li>`
        });
        this.oSmallImg.children[0].innerHTML = strHtml;
        this.oMiddleImg.children[0].src = middleImgs[0];
        this.oBigImg.src = bigImgs[0];
    }

    // 鼠标事件
    mouseHander() {
        this.oMiddleImg.addEventListener("mouseenter", () => {
            this.oMiddleArea.style.display = 'block';
            this.oBigArea.style.display = 'block';
        });
        this.oMiddleImg.addEventListener("mousemove", (evt) => {
            let e = evt || window.event;
            // 鼠标到页面的距离 e.clientX- 盒子到页面的距离e.offsetLeft - 自身的一半(自身的宽度/2)
            let moveX = e.clientX - this.oMiddleImg.offsetLeft - parseInt(this.oMiddleArea.offsetWidth / 2);
            let moveY = e.clientY - this.oMiddleImg.offsetTop - parseInt(this.oMiddleArea.offsetHeight / 2);
            // console.log(Utils.offset(this.oMiddleImg).top); // 1
            if (moveX <= 0) {
                moveX = 0;
            };
            if (moveX >= this.oMiddleImg.offsetWidth - this.oMiddleArea.offsetWidth) {
                moveX = this.oMiddleImg.offsetWidth - this.oMiddleArea.offsetWidth;
            }
            if (moveY <= 0) {
                moveY = 0;
            };
            if (moveY >= this.oMiddleImg.offsetHeight - this.oMiddleArea.offsetHeight) {
                moveY = this.oMiddleImg.offsetHeight - this.oMiddleArea.offsetHeight;
            };
            // 蒙版移动 this.oMiddleArea
            this.oMiddleArea.style.left = moveX + 'px';
            this.oMiddleArea.style.top = moveY + 'px';
            // // this.ratio大图放大的区域
            this.oBigImg.style.left = -this.ratio * moveX + 'px';
            this.oBigImg.style.top = -this.ratio * moveY + 'px';

        });
        this.oMiddleImg.addEventListener("mouseleave", () => {
            this.oMiddleArea.style.display = 'none';
            this.oBigArea.style.display = 'none';
        });
    }

    // 点击事件
    clickHander() {
        let { bigImgs, middleImgs, smallImgs } = this.data;
        this.oSmallImg.addEventListener("click", (evt) => {
            var e = evt || window.event;
            var ele = e.target || e.srcElement;
            if (ele.nodeName != 'IMG') {
                return;
            }
            let index = ele.getAttribute("data-index");
            // console.log(index);
            this.oMiddleImg.children[0].src = middleImgs[index];
            this.oBigImg.src = bigImgs[index];
        })
    }

    // 上下箭头点击事件
}

window.onload = function() {
    new MagnifyingGlass({
        el: "el",
        data: data
    })
}